import { inject, observer } from "mobx-react";
import React from "react";
import { Image, StyleSheet } from "react-native";
import BasePage from "../BasePage";
import { View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import TabNavigator from "react-native-tab-navigator";
import { IconImage } from "../../utils";
import ComplaintOrderMgr from "./ComplaintOrderMgr";

/**
 * 投诉订单
 */
@inject("userStore")
@observer
export default class ComplaintOrder extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      showUpgrade: false,
      versionInfo: null,
      updateInfo: null,
      selectedTab: 0,
      initTab: 0,
    };
  }


  render() {
    return (
      <View style={commonStyles.body}>
        <View flex>
          <TabNavigator
            style={styles.container}
            tabBarStyle={{ height: 52,paddingBottom:5, }}
            tabBarShadowStyle={{ backgroundColor: "#EEEEEE" }}>
            <TabNavigator.Item
              selected={this.state.selectedTab === 0}
              tabStyle={{ backgroundColor: "white",}}
              title="超时退款"
              titleStyle={{ fontSize: 12 }}
              selectedTitleStyle={{ color: "#555555" }}
              renderIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_cstk}
                />
              )}
              renderSelectedIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_cstk_checked}
                />
              )}
              onPress={() => this.setState({ selectedTab: 0 })}>
              <ComplaintOrderMgr
                {...this.props}
                title={'超时退款'}
                api={api.listOrderRefund}
                relationType={1}
              />
            </TabNavigator.Item>
            <TabNavigator.Item
              selected={this.state.selectedTab === 1}
              tabStyle={{ backgroundColor: "white" }}
              title="超时退订"
              titleStyle={{ fontSize: 12 }}
              selectedTitleStyle={{ color: "#555555" }}
              renderIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_cstd}
                />
              )}
              renderSelectedIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_cstd_checked}
                />
              )}
              onPress={() => this.setState({ selectedTab: 1 })}>
              <ComplaintOrderMgr title={'超时退订'} {...this.props} relationType={2} api={api.listOrderUnsubscribe}/>
            </TabNavigator.Item>
            <TabNavigator.Item
              selected={this.state.selectedTab === 3}
              title="投诉工单"
              titleStyle={{ fontSize: 12 }}
              tabStyle={{ backgroundColor: "white" }}
              selectedTitleStyle={{ color: "#555555" }}
              renderIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_tsgd}
                />
              )}
              renderSelectedIcon={() => (
                <Image
                  style={styles.tab_img}
                  source={IconImage.menu_tsgd_checked}
                />
              )}
              onPress={() => this.setState({ selectedTab: 3 })}>
              <ComplaintOrderMgr title={'投诉工单'} relationType={3} {...this.props} api={api.listOrdercomplaint} />
            </TabNavigator.Item>
          </TabNavigator>
          <View useSafeArea />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tab_img: { width: 23, height: 23 },
});
